Presentation View Modifiers#

These view modifiers customize the appearance, sizing, and interaction behavior of views presented using sheet in the Scripting app. They allow for adaptive presentations, resizing with detents, background interaction control, and more.

Apply these modifiers to the root view of the sheet content (e.g., <VStack>, <NavigationStack>, or <List>).

presentationCompactAdaptation#

Defines how a sheet adapts in compact horizontal or vertical size classes.

Type#

1presentationCompactAdaptation?: PresentationAdaptation | {
2  horizontal: PresentationAdaptation
3  vertical: PresentationAdaptation
4}

PresentationAdaptation options:#

• "automatic" – System default behavior
• "fullScreenCover" – Adapts to full-screen presentation
• "sheet" – Adapts to sheet-style presentation
• "popover" – Adapts to popover-style (where supported)
• "none" – Disables adaptation

Example#

1<NavigationStack
2  presentationCompactAdaptation={{
3    horizontal: "fullScreenCover",
4    vertical: "sheet"
5  }}
6>
7  {/* Sheet content */}
8</NavigationStack>

presentationDragIndicator#

Controls visibility of the drag indicator at the top of the sheet.

Type#

1presentationDragIndicator?: "visible" | "hidden" | "automatic"

Example#

1<VStack presentationDragIndicator="visible">
2  <Text>Pull the indicator to resize</Text>
3</VStack>

presentationDetents#

Defines the available heights ("detents") that the sheet can rest at. If multiple detents are provided, the user can drag the sheet to resize it.

Type#

1presentationDetents?: PresentationDetent[]

PresentationDetent values:#

• "medium" – Approximately half screen height (not available in compact vertical size class)
• "large" – Full screen height
• number > 1 – A fixed height in points
• number between 0 and 1 – A fractional height (e.g., 0.5 means 50% of available height)

Example#

1<VStack presentationDetents={[200, "medium", "large"]}>
2  <Text>Drag the sheet to change its height</Text>
3</VStack>

presentationBackgroundInteraction#

Defines whether and how the user can interact with views behind the presented sheet.

Type#

1presentationBackgroundInteraction?:
2  | "automatic"
3  | "enabled"
4  | "disabled"
5  | { enabledUpThrough: PresentationDetent }

Example#

Allow background interaction up to a certain sheet size:

1<VStack presentationBackgroundInteraction={{
2  enabledUpThrough: "medium"
3}}>
4  <Text>Background is interactive when sheet is small</Text>
5</VStack>

presentationContentInteraction#

Controls how the sheet prioritizes resizing vs scrolling when the user swipes up.

Type#

1presentationContentInteraction?: "automatic" | "resizes" | "scrolls"

Description#

• "resizes": Swipe gesture first resizes the sheet, then scrolls content.
• "scrolls": Content inside (e.g., ScrollView) scrolls immediately.
• "automatic": System default (usually prefers resizing first).

Example#

1<ScrollView presentationContentInteraction="scrolls">
2  {/* Scrolls immediately, doesn't trigger resize */}
3</ScrollView>

presentationCornerRadius#

Sets a custom corner radius for the sheet background.

Type#

1presentationCornerRadius?: number

Example#

1<VStack presentationCornerRadius={16}>
2  <Text>Sheet has rounded corners</Text>
3</VStack>

Full Usage Example#

1function SheetPage({ onDismiss }: {
2  onDismiss: () => void
3}) {
4  return <NavigationStack>
5    <List navigationTitle="Other Page">
6      <Text font="title" padding={50}>
7        Drag the indicator to resize the sheet height.
8      </Text>
9      <Button
10        title="Dismiss"
11        action={onDismiss}
12      />
13    </List>
14  </NavigationStack>
15}
16
17<Button
18  title="Present"
19  action={() => setIsPresented(true)}
20  sheet={{
21    isPresented: isPresented,
22    onChanged: setIsPresented,
23    content: <SheetPage
24      presentationDragIndicator="visible"
25      presentationDetents={[200, "medium", "large"]}
26      onDismiss={() => setIsPresented(false)}
27    />
28  }}
29/>

Summary#